<template>
  <a-table
    :columns="columns"
    :data-source="list"
    :pagination="false"
    :row-key="(record) => record.id"
    :scroll="{ y: 420 }"
  >
    <span slot="select" slot-scope="text, record">
      <a-radio :checked="record.isChecked" @click="change(record)"></a-radio>
    </span>

    <span slot="pic_url" slot-scope="text">
      <a-avatar shape="square" :size="48" icon="user" :src="text" />
    </span>
  </a-table>
</template>

<script>
import { getUrlParam, getDiyURLText } from '@/utils/utils.js'
import { getCatList } from '@/api/diy'

const columns = [
  {
    title: '选择',
    scopedSlots: {
      customRender: 'select',
    },
    width: 60,
  },
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '分类名称',
    dataIndex: 'name',
  },
  {
    title: '分类图标',
    dataIndex: 'pic_url',
    scopedSlots: {
      customRender: 'pic_url',
    },
  },
]

export default {
  data() {
    return {
      columns,
      list: [],
    }
  },

  props: {
    link: {
      type: Object,
      default() {
        return null
      },
    },
  },

  created() {
    this.getList()
  },

  methods: {
    // 获取数据列表
    async getList() {
      if (getUrlParam('store_id')) this.store_id = getUrlParam('store_id')
      const hide = this.$message.loading('加载中', 0)

      const res = await getCatList({ store_id: this.store_id, is_show_goods: 0 })

      if (res.code == 0 && res.data.list && res.data.list.length > 0) {
        let list = res.data.list || []
        this.list = list.map((el) => {
          return {
            id: el.id,
            name: el.name,
            pic_url: el.pic_url,
            isChecked: false,
          }
        })
      }

      hide()
    },

    change(item) {
      this.$nextTick(() => {
        this.list.forEach((el) => {
          el.isChecked = false
        })
        item.isChecked = true
      })

      let link = getDiyURLText(this.link, item)
      this.$emit('handle', 'link', link)
    },
  },
}
</script>
